<template>
	<!--编辑利润成本-->
	<div class="">
		<CommonTitle class="m-b20" titleName="利润表"></CommonTitle>

		<div class="content">
			<el-form :inline="true" label-width="120px" :model="formData">
				<el-row>
					<el-col :span="12">
						<el-form-item label="项目名称">
							<el-input v-model="formData.user" placeholder="" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="上级">
							<el-input v-model="formData.user" placeholder="" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="总额">
							<el-input v-model="formData.user" placeholder="" />
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="年度金额">
							<el-button
								style="float: right"
								size="small"
								class="look"
								type="primary"
								@click="addOptinsHandel"
								><svg-icon class="m-r5" icon-class="project-add-icon" />创建</el-button
							>
						</el-form-item>
					</el-col>
					<el-col class="m-b20" :span="24" v-for="(v,i) in state.list" :key="i">
						<el-row style="margin-left: 120px">
							<el-col :span="4">
								<el-input> </el-input>
							</el-col>
							<el-col :span="6" class="m-l20">
								<el-input> </el-input>
							</el-col>
							<el-col :span="4" class="btncol">
								<el-button
									size="small"
									class="look m-l20"
									type="primary"
									@click="editHandel(v,i)"
									>编辑</el-button
								>
								<el-button
									size="small"
									class="look"
									type="primary"
                  color="#F12527"
									@click="deleteHandel(i)"
									>删除</el-button
								>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div class="footerBtn m-t20">
			<el-button
				class="look m-l20"
				type="primary"
				@click="cancelHandel"
				>取消</el-button
			>
			<el-button  class="look" type="primary" @click="submitHandel"
				>提交</el-button
			>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import CommonTitle from "@/components/CommonTitle.vue";
import { ElForm, ElRow, ElCol, ElButton, ElTree } from "element-plus";

const state = reactive({
  list: [{}]
});
const formData = ref({});

const addOptinsHandel = () => {
  state.list.push({})
};
const editHandel = (index) => {
  
};
const deleteHandel = () => {
state.list.splice(index, 1);

};

const cancelHandel = () => {};
const submitHandel = () => {};

const handel = () => {};
</script>
<style lang="scss" scoped>
.content {
	padding: 34px 64px 34px 10px;
	width: 100%;
	min-height: 349px;
	border-radius: 10px;
	border: 1px solid #e3e7f1;
	.btncol {
		line-height: 40px;
	}
}

.footerBtn {
  text-align: center;
}
.el-form-item {
	width: 100%;
}
</style>
